<template>
  <div>
    <el-form ref="form" :model="queryParam" label-width="80px">
      <el-form-item label="活动名称">
        <el-input v-model="queryParam.name"></el-input>
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select v-model="queryParam.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动时间">
        <el-date-picker
            v-model="queryParam.dateValue"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchQuery" >查询</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
    <el-button @click="onClearSelected">取消选择</el-button>
    <el-table
        ref="table"
        @select="onSelectChange"
        :data="dataSource" style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="ctreateByName" label="Date" width="180" />
      <el-table-column prop="cumulativePeriod" label="Name" width="180" />
      <el-table-column prop="workFaceName" label="Address" />
      <el-table-column label="Operations">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleDetail(scope.row)">Detail</el-button>
          <el-button link type="primary" size="small">Edit</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        layout="prev, pager, next"
        @current-change="handleTableChange"
        :total="total">
    </el-pagination>

    <zxtable-modal ref="modalForm"></zxtable-modal>

  </div>
</template>

<script>
import { ZxListMixin } from '@/utils/mixins/ZxListMixin'
import ZxtableModal from "@/components/demo/ZxtableModal";
export default {
  name: "zxTable",
  mixins: [ZxListMixin],
  components: { ZxtableModal },
  data() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
      ],
      queryParam: {
        name: '111',
        region: '',
        dateValue:'',
        value2: '',
        pageSize: 15
      },
      title: '',

      url: {
        list: '/dashboard/projectInfo'
      }

    }
  },
  created() {

  },
  mounted() {

  },
  methods: {

    txt(){
      console.log(11111)
    }
  }
}
</script>

<style scoped>

</style>